html{
    @media screen and(min-width:0px) {
        font-size: 34px;
    }
    @media screen and(min-width:255px) {
        font-size: 34px;
    }
    @media screen and(min-width:280px) {
        font-size: 37.3333333333333px;
    }
    @media screen and(min-width:360px) {
        font-size: 48px;
    }
    @media screen and(min-width:375px) {
        font-size: 50px;
    }
}

.box{
    @paddingTop:1.868rem;
    @paddingBottom:1.62rem;
    padding-bottom:@paddingBottom;
    padding-top: @paddingTop;
    @media screen and (max-width:676px) {
        padding-top: @paddingTop*0.9;
        padding-bottom: @paddingBottom*0.9;
    }
    @media screen and (max-width:601px) {
        padding-top: @paddingTop*0.8;
        padding-bottom: @paddingBottom*0.8;
    }
    @media screen and (max-width:526px) {
        padding-top: @paddingTop*0.7;
        padding-bottom: @paddingBottom*0.7;
    }
    @media screen and (max-width:451px) {
        padding-top: @paddingTop*0.6;
        padding-bottom: @paddingBottom*0.6;
    }
    @media screen and (max-width:376px) {
        padding-top: @paddingTop*0.5;
        padding-bottom: @paddingBottom*0.5;
    }
    #topBar{
        @padding:.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 999;
        padding: @padding 0;
        @media screen and (max-width:676px) {
            padding: @padding*0.9 0;
        }
        @media screen and (max-width:601px) {
            padding: @padding*0.8 0;
        }
        @media screen and (max-width:526px) {
            padding: @padding*0.7 0;
        }
        @media screen and (max-width:451px) {
            padding: @padding*0.6 0;
        }
        @media screen and (max-width:376px) {
            padding: @padding*0.5 0;
        }
        &>div{
            display: flex;
            align-items: center;
            &>a{
                display: flex;
                align-items: center;
            }
        }
        .logoImg{
            width: 17.3333333vw;
            display: flex;
            justify-content: center;
            align-items: center;
            &>a{
                &>img{
                    @height: .88rem;
                    @marginLeft: 0.84rem;
                    // margin-left: @marginLeft;
                    @media screen and (max-width:676px) {
                        // margin-left: @marginLeft*0.9;
                        height: @height*0.9;
                    }
                    @media screen and (max-width:601px) {
                        // margin-left: @marginLeft*0.8;
                        height: @height*0.8;
                    }
                    @media screen and (max-width:526px) {
                        // margin-left: @marginLeft*0.7;
                        height: @height*0.7;
                    }
                    @media screen and (max-width:451px) {
                        // margin-left: @marginLeft*0.6;
                        height: @height*0.6;
                    }
                    @media screen and (max-width:376px) {
                        // margin-left: @marginLeft*0.5;
                        height: @height*0.5;
                    }
                }
            }       
        }
        .inputBox{
            flex: 1;
            background-color: #ebebeb;
            border-radius: 9999px;
            padding:0 .26rem;
            &>img{
                @margin:0.8rem;
                @height: 0.42rem;
                margin: 0 @margin;
                @media screen and (max-width:676px) {
                    margin:0 @margin*0.9;
                    height: @height*0.9;
                }
                @media screen and (max-width:601px) {
                    margin:0 @margin*0.8;
                    height: @height*0.8;
                }
                @media screen and (max-width:526px) {
                    margin:0 @margin*0.7;
                    height: @height*0.7;
                }
                @media screen and (max-width:451px) {
                    margin:0 @margin*0.6;
                    height: @height*0.6;
                }
                @media screen and (max-width:376px) {
                    margin:0 @margin*0.5;
                    height: @height*0.5;
                }
            }
            &>input{
                @fontSize:0.38rem;
                @lineHeight:0.92rem;
                font-size: @fontSize;
                line-height: @lineHeight;
                outline: none;
                border: none;
                background-color: transparent;
                appearance: none;
                flex: 1;
                @media screen and (max-width:676px) {
                    font-size: @fontSize*0.9;
                    line-height: @lineHeight*0.9;
                }
                @media screen and (max-width:601px) {
                    font-size: @fontSize*0.8;
                    line-height: @lineHeight*0.8;
                }
                @media screen and (max-width:526px) {
                    font-size: @fontSize*0.7;
                    line-height: @lineHeight*0.7;
                }
                @media screen and (max-width:451px) {
                    font-size: @fontSize*0.6;
                    line-height: @lineHeight*0.6;
                }
                @media screen and (max-width:376px) {
                    font-size: @fontSize*0.5;
                    line-height: @lineHeight*0.5;
                }
                &::placeholder{
                    color: #bebebe;
                }
            }
        }
        .scanCode{
            width: 13.3333333333vw;
            display: flex;
            align-items: center;
            justify-content: center;
            &>a{
                &>img{
                    @height: .9rem;
                    // @marginLeft:.8rem;
                    // margin-left: @marginLeft;
                    @media screen and (max-width:676px) {
                        // margin-left: @marginLeft*0.9;
                        height: @height*0.9;
                    }
                    @media screen and (max-width:601px) {
                        // margin-left: @marginLeft*0.8;
                        height: @height*0.8;
                    }
                    @media screen and (max-width:526px) {
                        // margin-left: @marginLeft*0.7;
                        height: @height*0.7;
                    }
                    @media screen and (max-width:451px) {
                        // margin-left: @marginLeft*0.6;
                        height: @height*0.6;
                    }
                    @media screen and (max-width:376px) {
                        // margin-left: @marginLeft*0.5;
                        height: @height*0.5;
                    }
                }
            }
        
        }
    }
    #banner{
        .carousel{
            .item{
                &>a{
                    display: flex;
                    &>img{
                        width: 100%;
                    }
                }
            }
        }
    }
    #navList{
        @paddingTop:.6rem;  
        padding-top: @paddingTop;
        @media screen and (max-width:676px) {
            padding-top: @paddingTop*0.9;
        }
        @media screen and (max-width:601px) {
            padding-top: @paddingTop*0.8;
        }
        @media screen and (max-width:526px) {
            padding-top: @paddingTop*0.7;
        }
        @media screen and (max-width:451px) {
            padding-top: @paddingTop*0.6;
        }
        @media screen and (max-width:376px) {
            padding-top: @paddingTop*0.5;
        }
        .cosmetics{
            display: flex;
            align-items: center;
            justify-content: space-around;
            .item{
                text-align: center;
                &:nth-of-type(1){
                    .imgBox{
                        background-image:linear-gradient(to top,#6b6de3,#64afe3);
                    }
                }
                &:nth-of-type(2){
                    .imgBox{
                        background-image:linear-gradient(to top,#c341e2,#e36bcc);
                    }
                }
                &:nth-of-type(3){
                    .imgBox{
                        background-image:linear-gradient(to top,#e3456b,#e387a1);
                    }
                }
                &:nth-of-type(4){
                    .imgBox{
                        background-image:linear-gradient(to top,#e19f5b,#e3c887);
                    }
                }
                .imgBox{
                    margin: 0 auto;
                    @size:2.26rem;
                    width: @size;
                    height: @size;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    @media screen and (max-width:676px) {
                        width:@size*0.9;
                        height:@size*0.9;
                    }
                    @media screen and (max-width:601px) {
                        width:@size*0.8;
                        height:@size*0.8;
                    }
                    @media screen and (max-width:526px) {
                        width:@size*0.7;
                        height:@size*0.7;
                    }
                    @media screen and (max-width:451px) {
                        width:@size*0.6;
                        height:@size*0.6;
                    }
                    @media screen and (max-width:376px) {
                        width:@size*0.5;
                        height:@size*0.5;
                    }
                    &>img{
                        @height:1.06rem;
                        @media screen and (max-width:676px) {
                            height: @height*0.9;
                        }
                        @media screen and (max-width:601px) {
                            height: @height*0.8;
                        }
                        @media screen and (max-width:526px) {
                            height: @height*0.7;
                        }
                        @media screen and (max-width:451px) {
                            height: @height*0.6;
                        }
                        @media screen and (max-width:376px) {
                            height: @height*0.5;
                        }
                    }
                }
                &>p{
                    @fontSize:0.56rem;
                    @lineHeight:1.44rem;
                    font-size: @fontSize;
                    line-height: @lineHeight;
                    color: #0e0e0e;
                    @media screen and (max-width:676px) {
                        font-size: @fontSize*0.9;
                        line-height: @lineHeight*0.9;
                    }
                    @media screen and (max-width:601px) {
                        font-size: @fontSize*0.8;
                        line-height: @lineHeight*0.8;
                    }
                    @media screen and (max-width:526px) {
                        font-size: @fontSize*0.7;
                        line-height: @lineHeight*0.7;
                    }
                    @media screen and (max-width:451px) {
                        font-size: @fontSize*0.6;
                        line-height: @lineHeight*0.6;
                    }
                    @media screen and (max-width:376px) {
                        font-size: @fontSize*0.5;
                        line-height: @lineHeight*0.5;
                    }
                }
            }
        }
        .recommend{
            display: flex;
            align-items: stretch;
            justify-content: space-around;
            .item{
                box-shadow: 1px 2px 5px 1px #f3f3f3,-1px -2px 5px 1px #f3f3f3;
                width: 48vw;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                &:nth-of-type(1){
                    .titleBox{
                        .imgBox{
                            background-image:linear-gradient(to top,#e51f31,#e3586d) ;
                            &>img{
                                @size:0.62rem;
                                @media screen and (max-width:676px) {
                                    height:@size*0.9;
                                }
                                @media screen and (max-width:601px) {
                                    height:@size*0.8;
                                }
                                @media screen and (max-width:526px) {
                                    height:@size*0.7;
                                }
                                @media screen and (max-width:451px) {
                                    height:@size*0.6;
                                }
                                @media screen and (max-width:376px) {
                                    height:@size*0.5;
                                }
                            }
                        }
                    }
                    .imgList{
                        justify-content: space-around;
                        .imgBox{
                            &>img{
                                &:nth-of-type(1){
                                    @size:2.12rem;
                                    @media screen and (max-width:676px) {
                                        height:@size*0.9;
                                    }
                                    @media screen and (max-width:601px) {
                                        height:@size*0.8;
                                    }
                                    @media screen and (max-width:526px) {
                                        height:@size*0.7;
                                    }
                                    @media screen and (max-width:451px) {
                                        height:@size*0.6;
                                    }
                                    @media screen and (max-width:376px) {
                                        height:@size*0.5;
                                    }
                                }
                                &:nth-of-type(2){
                                    @size:2.1rem;
                                    @media screen and (max-width:676px) {
                                        height:@size*0.9;
                                    }
                                    @media screen and (max-width:601px) {
                                        height:@size*0.8;
                                    }
                                    @media screen and (max-width:526px) {
                                        height:@size*0.7;
                                    }
                                    @media screen and (max-width:451px) {
                                        height:@size*0.6;
                                    }
                                    @media screen and (max-width:376px) {
                                        height:@size*0.5;
                                    }
                                }
                            }
                        }
                        
                    }
                }
                &:nth-of-type(2){
                    .titleBox{
                        .imgBox{
                            background-image:linear-gradient(to top,#e46c5a,#e4997b) ;
                            &>img{
                                @size:.56rem;
                                @media screen and (max-width:676px) {
                                    height:@size*0.9;
                                }
                                @media screen and (max-width:601px) {
                                    height:@size*0.8;
                                }
                                @media screen and (max-width:526px) {
                                    height:@size*0.7;
                                }
                                @media screen and (max-width:451px) {
                                    height:@size*0.6;
                                }
                                @media screen and (max-width:376px) {
                                    height:@size*0.5;
                                }
                            }
                        }
                    }
                    .imgList{
                        justify-content: space-evenly;
                        .imgBox{
                            &>img{
                                &:nth-of-type(1){
                                    @size:2.1rem;
                                    @media screen and (max-width:676px) {
                                        height:@size*0.9;
                                    }
                                    @media screen and (max-width:601px) {
                                        height:@size*0.8;
                                    }
                                    @media screen and (max-width:526px) {
                                        height:@size*0.7;
                                    }
                                    @media screen and (max-width:451px) {
                                        height:@size*0.6;
                                    }
                                    @media screen and (max-width:376px) {
                                        height:@size*0.5;
                                    }
                                }
                                &:nth-of-type(2){
                                    @size:2.36rem;
                                    @media screen and (max-width:676px) {
                                        height:@size*0.9;
                                    }
                                    @media screen and (max-width:601px) {
                                        height:@size*0.8;
                                    }
                                    @media screen and (max-width:526px) {
                                        height:@size*0.7;
                                    }
                                    @media screen and (max-width:451px) {
                                        height:@size*0.6;
                                    }
                                    @media screen and (max-width:376px) {
                                        height:@size*0.5;
                                    }
                                }
                            }
                        }       
                    }
                }
                .titleBox{
                    @margin:0.3rem;
                    margin: @margin 0;
                    display: flex;
                    align-items: center;
                    @media screen and (max-width:676px) {
                        margin:@margin*0.9 0;
                    }
                    @media screen and (max-width:601px) {
                        margin:@margin*0.8 0;
                    }
                    @media screen and (max-width:526px) {
                        margin:@margin*0.7 0;
                    }
                    @media screen and (max-width:451px) {
                        margin:@margin*0.6 0;
                    }
                    @media screen and (max-width:376px) {
                        margin:@margin*0.5 0;
                    }
                    .imgBox{
                        @size:0.96rem;
                        @margin:.4rem;
                        width: @size;
                        height: @size;
                        margin: 0 @margin;
                        border-radius: 50%;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        @media screen and (max-width:676px) {
                            width:@size*0.9;
                            height:@size*0.9;
                        }
                        @media screen and (max-width:601px) {
                            width:@size*0.8;
                            height:@size*0.8;
                        }
                        @media screen and (max-width:526px) {
                            width:@size*0.7;
                            height:@size*0.7;
                        }
                        @media screen and (max-width:451px) {
                            width:@size*0.6;
                            height:@size*0.6;
                        }
                        @media screen and (max-width:376px) {
                            width:@size*0.5;
                            height:@size*0.5;
                        }
                    }
                    .title{
                        &>p{
                            &:nth-of-type(1){
                                @fontSize:.54rem;
                                @lineHeight:.7rem;
                                font-size: @fontSize;
                                line-height: @lineHeight;
                                color: #0e0e0e;
                                @media screen and (max-width:676px) {
                                    font-size: @fontSize*0.9;
                                    line-height: @lineHeight*0.9;
                                }
                                @media screen and (max-width:601px) {
                                    font-size: @fontSize*0.8;
                                    line-height: @lineHeight*0.8;
                                }
                                @media screen and (max-width:526px) {
                                    font-size: @fontSize*0.7;
                                    line-height: @lineHeight*0.7;
                                }
                                @media screen and (max-width:451px) {
                                    font-size: @fontSize*0.6;
                                    line-height: @lineHeight*0.6;
                                }
                                @media screen and (max-width:376px) {
                                    font-size: @fontSize*0.5;
                                    line-height: @lineHeight*0.5;
                                }
                            }
                            &:nth-of-type(2){
                                @fontSize:.44rem;
                                @lineHeight:.56rem;
                                font-size: @fontSize;
                                line-height: @lineHeight;
                                color: #6a6a6a;
                                @media screen and (max-width:676px) {
                                    font-size: @fontSize*0.9;
                                    line-height: @lineHeight*0.9;
                                }
                                @media screen and (max-width:601px) {
                                    font-size: @fontSize*0.8;
                                    line-height: @lineHeight*0.8;
                                }
                                @media screen and (max-width:526px) {
                                    font-size: @fontSize*0.7;
                                    line-height: @lineHeight*0.7;
                                }
                                @media screen and (max-width:451px) {
                                    font-size: @fontSize*0.6;
                                    line-height: @lineHeight*0.6;
                                }
                                @media screen and (max-width:376px) {
                                    font-size: @fontSize*0.5;
                                    line-height: @lineHeight*0.5;
                                }
                            }
                        }
                    }
                }
                .imgList{
                    display: flex;
                    align-items: center;
                }
            }
        }
        .itemList{
            @marginTop:.5rem;
            margin-top: @marginTop;
            display: flex;
            flex-wrap: wrap;
            @media screen and (max-width:676px) {
                margin-top:@marginTop*0.9;
            }
            @media screen and (max-width:601px) {
                margin-top:@marginTop*0.8;
            }
            @media screen and (max-width:526px) {
                margin-top:@marginTop*0.7;
            }
            @media screen and (max-width:451px) {
                margin-top:@marginTop*0.6;
            }
            @media screen and (max-width:376px) {
                margin-top:@marginTop*0.5;
            }
            .item{
                @paddingTop:.62rem;
                @paddingBottom:.2rem;
                padding: @paddingTop 0 @paddingBottom 0;
                border: 2px solid #f1f1f1;
                display: flex;
                align-items: center;
                width: 50%;
                box-sizing: border-box;
                @media screen and (max-width:676px) {
                    padding: @paddingTop*0.9 0 @paddingBottom*0.9 0;
                }
                @media screen and (max-width:601px) {
                    padding: @paddingTop*0.8 0 @paddingBottom*0.8 0;
                }
                @media screen and (max-width:526px) {
                    padding: @paddingTop*0.7 0 @paddingBottom*0.7 0;
                }
                @media screen and (max-width:451px) {
                    padding: @paddingTop*0.6 0 @paddingBottom*0.6 0;
                }
                @media screen and (max-width:376px) {
                    padding: @paddingTop*0.5 0 @paddingBottom*0.5 0;
                }
                &:nth-of-type(1),&:nth-of-type(2){
                    border-top: 0;
                    border-bottom: 0;
                }
                &:nth-of-type(n+1){
                    border-left: 0;
                }
                &:nth-of-type(2n){
                    border-right: 0;
                }
                &:nth-of-type(1){
                    .imgBox{
                        &>img{
                            @size:.92rem;
                            @media screen and (max-width:676px) {
                                height:@size*0.9;
                            }
                            @media screen and (max-width:601px) {
                                height:@size*0.8;
                            }
                            @media screen and (max-width:526px) {
                                height:@size*0.7;
                            }
                            @media screen and (max-width:451px) {
                                height:@size*0.6;
                            }
                            @media screen and (max-width:376px) {
                                height:@size*0.5;
                            }
                        }
                    }
                }
                &:nth-of-type(2){
                    .imgBox{
                        &>img{
                            @size:.88rem;
                            @media screen and (max-width:676px) {
                                height:@size*0.9;
                            }
                            @media screen and (max-width:601px) {
                                height:@size*0.8;
                            }
                            @media screen and (max-width:526px) {
                                height:@size*0.7;
                            }
                            @media screen and (max-width:451px) {
                                height:@size*0.6;
                            }
                            @media screen and (max-width:376px) {
                                height:@size*0.5;
                            }
                        }
                    }
                }
                &:nth-of-type(3){
                    .imgBox{
                        &>img{
                            @size:.94rem;
                            @media screen and (max-width:676px) {
                                height:@size*0.9;
                            }
                            @media screen and (max-width:601px) {
                                height:@size*0.8;
                            }
                            @media screen and (max-width:526px) {
                                height:@size*0.7;
                            }
                            @media screen and (max-width:451px) {
                                height:@size*0.6;
                            }
                            @media screen and (max-width:376px) {
                                height:@size*0.5;
                            }
                        }
                    }
                }
                &:nth-of-type(4){
                    .imgBox{
                        &>img{
                            @size:.9rem;
                            @media screen and (max-width:676px) {
                                height:@size*0.9;
                            }
                            @media screen and (max-width:601px) {
                                height:@size*0.8;
                            }
                            @media screen and (max-width:526px) {
                                height:@size*0.7;
                            }
                            @media screen and (max-width:451px) {
                                height:@size*0.6;
                            }
                            @media screen and (max-width:376px) {
                                height:@size*0.5;
                            }
                        }
                    }
                }
            }
            .imgBox{
                @margin:.7rem;
                margin: 0 @margin;
                @media screen and (max-width:676px) {
                    margin:0 @margin*0.9;
                }
                @media screen and (max-width:601px) {
                    margin:0 @margin*0.8;
                }
                @media screen and (max-width:526px) {
                    margin:0 @margin*0.7;
                }
                @media screen and (max-width:451px) {
                    margin:0 @margin*0.6;
                }
                @media screen and (max-width:376px) {
                    margin:0 @margin*0.5;
                }
            }
            .titleBox{
                .title{
                    @lineHeight:.82rem;
                    @fontSize:.5rem;
                    line-height: @lineHeight;
                    font-size: @fontSize;
                    color: #0e0e0e;
                    @media screen and (max-width:676px) {
                        font-size: @fontSize*0.9;
                        line-height: @lineHeight*0.9;
                    }
                    @media screen and (max-width:601px) {
                        font-size: @fontSize*0.8;
                        line-height: @lineHeight*0.8;
                    }
                    @media screen and (max-width:526px) {
                        font-size: @fontSize*0.7;
                        line-height: @lineHeight*0.7;
                    }
                    @media screen and (max-width:451px) {
                        font-size: @fontSize*0.6;
                        line-height: @lineHeight*0.6;
                    }
                    @media screen and (max-width:376px) {
                        font-size: @fontSize*0.5;
                        line-height: @lineHeight*0.5;
                    }
                }
                .text{
                    @lineHeight:.7rem;
                    @fontSize:.38rem;
                    line-height: @lineHeight;
                    font-size: @fontSize;
                    color: #7d7d7d;
                    @media screen and (max-width:676px) {
                        font-size: @fontSize*0.9;
                        line-height: @lineHeight*0.9;
                    }
                    @media screen and (max-width:601px) {
                        font-size: @fontSize*0.8;
                        line-height: @lineHeight*0.8;
                    }
                    @media screen and (max-width:526px) {
                        font-size: @fontSize*0.7;
                        line-height: @lineHeight*0.7;
                    }
                    @media screen and (max-width:451px) {
                        font-size: @fontSize*0.6;
                        line-height: @lineHeight*0.6;
                    }
                    @media screen and (max-width:376px) {
                        font-size: @fontSize*0.5;
                        line-height: @lineHeight*0.5;
                    }
                }
            }
        }
    }
    #workList{
        @padding:.55rem;
        padding:0 @padding;
        margin-bottom: 10px;
        @media screen and (max-width:676px) {
            padding:0 @padding*0.9;
        }
        @media screen and (max-width:601px) {
            padding:0 @padding*0.8;
        }
        @media screen and (max-width:526px) {
            padding:0 @padding*0.7;
        }
        @media screen and (max-width:451px) {
            padding:0 @padding*0.6;
        }
        @media screen and (max-width:376px) {
            padding:0 @padding*0.5;
        }
        &>input{
            display: none;
            &#work1:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(1){
                            color: #ff8f52;
                        }
                    }
                }
            }
            &#work2:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(2){
                            color: #ff8f52;
                        }
                    }
                }
            }
            &#work3:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(3){
                            color: #ff8f52;
                        }
                    }
                }
            }
            &#work4:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(4){
                            color: #ff8f52;
                        }
                    }
                }
            }
            &#work5:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(5){
                            color: #ff8f52;
                        }
                    }
                }
            }
            &#work6:checked{
                &~.labelList{
                    &>label{
                        &:nth-of-type(6){
                            color: #ff8f52;
                        }
                    }
                }
            }
        }
        .labelList{
            display: flex;
            justify-content: space-between;
            &>label{
                @lineHeight:1.58rem;
                @fontSize:.54rem;
                line-height: @lineHeight;
                font-size: @fontSize;
                flex: 1;
                color: #7f7f7f;
                text-align: center;
                @media screen and (max-width:676px) {
                    font-size: @fontSize*0.9;
                    line-height: @lineHeight*0.9;
                }
                @media screen and (max-width:601px) {
                    font-size: @fontSize*0.8;
                    line-height: @lineHeight*0.8;
                }
                @media screen and (max-width:526px) {
                    font-size: @fontSize*0.7;
                    line-height: @lineHeight*0.7;
                }
                @media screen and (max-width:451px) {
                    font-size: @fontSize*0.6;
                    line-height: @lineHeight*0.6;
                }
                @media screen and (max-width:376px) {
                    font-size: @fontSize*0.5;
                    line-height: @lineHeight*0.5;
                }
            }
        }
        .itemList{
            display: flex;
            justify-content: space-between; 
            .item{
                &>div{
                    @borderRadius: 0.4rem;;
                    display: inline-block;
                    border-radius: @borderRadius;
                    box-shadow: 1px 2px 5px 1px #f3f3f3,-1px -2px 5px 1px #f3f3f3;
                    overflow: hidden;
                    @media screen and (max-width:676px) {
                        border-radius: @borderRadius*0.9;
                    }
                    @media screen and (max-width:601px) {
                        border-radius: @borderRadius*0.8;
                    }
                    @media screen and (max-width:526px) {
                        border-radius: @borderRadius*0.7;
                    }
                    @media screen and (max-width:451px) {
                        border-radius: @borderRadius*0.6;
                    }
                    @media screen and (max-width:376px) {
                        border-radius: @borderRadius*0.5;
                    }
                    .imgBox{     
                        display: flex;
                        width: 44.6666666666666666vw;
                        &>img{
                            width: 100%;
                        }
                    }
                    .itemLabel{
                        @fontSize:.4rem;
                        @lineHeight:.52rem;
                        @marginTop:.18rem;
                        @marginLeft:.16rem;
                        font-size: @fontSize;
                        line-height: @lineHeight;
                        margin-top: @marginTop;
                        margin-left: @marginLeft;
                        color: #2d2d2d;
                        max-width: 40vw;
                        @media screen and (max-width:676px) {
                            font-size: @fontSize*0.9;
                            line-height: @lineHeight*0.9;
                            margin-top: @marginTop*0.9;
                            margin-left: @marginLeft*0.9;
                        }
                        @media screen and (max-width:601px) {
                            font-size: @fontSize*0.8;
                            line-height: @lineHeight*0.8;
                            margin-top: @marginTop*0.8;
                            margin-left: @marginLeft*0.8;
                        }
                        @media screen and (max-width:526px) {
                            font-size: @fontSize*0.7;
                            line-height: @lineHeight*0.7;
                            margin-top: @marginTop*0.7;
                            margin-left: @marginLeft*0.7;
                        }
                        @media screen and (max-width:451px) {
                            font-size: @fontSize*0.6;
                            line-height: @lineHeight*0.6;
                            margin-top: @marginTop*0.6;
                            margin-left: @marginLeft*0.6;
                        }
                        @media screen and (max-width:376px) {
                            font-size: @fontSize*0.5;
                            line-height: @lineHeight*0.5;
                            margin-top: @marginTop*0.5;
                            margin-left: @marginLeft*0.5;
                        }
                    }
                    .userInfo{
                        @marginTop:.18rem;
                        @marginBottom:.34rem;
                        margin: @marginTop 0 @marginBottom 0;
                        display: flex;
                        align-items: end;
                        justify-content: space-around;
                        @media screen and (max-width:676px) {
                            margin: @marginTop*0.9 0 @marginBottom*0.9 0;
                        }
                        @media screen and (max-width:601px) {
                            margin: @marginTop*0.8 0 @marginBottom*0.8 0;
                        }
                        @media screen and (max-width:526px) {
                            margin: @marginTop*0.7 0 @marginBottom*0.7 0;
                        }
                        @media screen and (max-width:451px) {
                            margin: @marginTop*0.6 0 @marginBottom*0.6 0;
                        }
                        @media screen and (max-width:376px) {
                            margin: @marginTop*0.5 0 @marginBottom*0.5 0;
                        }
                        .headSculpture{
                            @size:.82rem;
                            width: @size;
                            height: @size;
                            border-radius: 50%;
                            overflow: hidden;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            @media screen and (max-width:676px) {
                                width:@size*0.9;
                                height:@size*0.9;
                            }
                            @media screen and (max-width:601px) {
                                width:@size*0.8;
                                height:@size*0.8;
                            }
                            @media screen and (max-width:526px) {
                                width:@size*0.7;
                                height:@size*0.7;
                            }
                            @media screen and (max-width:451px) {
                                width:@size*0.6;
                                height:@size*0.6;
                            }
                            @media screen and (max-width:376px) {
                                width:@size*0.5;
                                height:@size*0.5;
                            }
                            &>img{
                                width: 110%;
                            }
                        }
                        & span{
                            color: #2d2d2d;
                        }
                        .name{
                            @fontSize:.44rem;
                            font-size: @fontSize;
                            @media screen and (max-width:676px) {
                                font-size: @fontSize*0.9;
                            }
                            @media screen and (max-width:601px) {
                                font-size: @fontSize*0.8;
                            }
                            @media screen and (max-width:526px) {
                                font-size: @fontSize*0.7;
                            }
                            @media screen and (max-width:451px) {
                                font-size: @fontSize*0.6;
                            }
                            @media screen and (max-width:376px) {
                                font-size: @fontSize*0.5;
                            }
                        }
                        .fanNub{
                            @fontSize:.32rem;
                            font-size: @fontSize;@media screen and (max-width:676px) {
                                font-size: @fontSize*0.9;
                            }
                            @media screen and (max-width:676px) {
                                font-size: @fontSize*0.9;
                            }
                            @media screen and (max-width:601px) {
                                font-size: @fontSize*0.8;
                            }
                            @media screen and (max-width:526px) {
                                font-size: @fontSize*0.7;
                            }
                            @media screen and (max-width:451px) {
                                font-size: @fontSize*0.6;
                            }
                            @media screen and (max-width:376px) {
                                font-size: @fontSize*0.5;
                            }
                        }
                        .likeBox{
                            display: flex;
                            align-items: end;
                            &>img{
                                @size:.54rem;
                                @media screen and (max-width:676px) {
                                    height:@size*0.9;
                                }
                                @media screen and (max-width:601px) {
                                    height:@size*0.8;
                                }
                                @media screen and (max-width:526px) {
                                    height:@size*0.7;
                                }
                                @media screen and (max-width:451px) {
                                    height:@size*0.6;
                                }
                                @media screen and (max-width:376px) {
                                    height:@size*0.5;
                                }
                            }
                            &>span{
                                @fontSize:.32rem;
                                font-size: @fontSize;
                                @media screen and (max-width:676px) {
                                    font-size: @fontSize*0.9;
                                }
                                @media screen and (max-width:601px) {
                                    font-size: @fontSize*0.8;
                                }
                                @media screen and (max-width:526px) {
                                    font-size: @fontSize*0.7;
                                }
                                @media screen and (max-width:451px) {
                                    font-size: @fontSize*0.6;
                                }
                                @media screen and (max-width:376px) {
                                    font-size: @fontSize*0.5;
                                }
                            }
                        }
                    }
                }
              
            }           
        }
    }
    #tabBar{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        background-color: #fff;
        &>input{
            display: none;
            &:checked{
                &+label{
                    color: #ff8749;
                }
            }
        }
        .item{
            color: #0e0e0e;
            flex: 1;
            text-align: center;
            &>div{
                @size:.86rem;
                width: @size;
                height: @size;
                border-radius: 50%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #ff8749;
                @media screen and (max-width:676px) {
                    height:@size*0.9;
                    width:@size*0.9;
                }
                @media screen and (max-width:601px) {
                    height:@size*0.8;
                    width:@size*0.8;
                }
                @media screen and (max-width:526px) {
                    height:@size*0.7;
                    width:@size*0.7;
                }
                @media screen and (max-width:451px) {
                    height:@size*0.6;
                    width:@size*0.6;
                }
                @media screen and (max-width:376px) {
                    height:@size*0.5;
                    width:@size*0.5;
                }
                &>span{
                    @fontSize:.34rem;
                    font-size: @fontSize;
                    color: #fff;
                    @media screen and (max-width:676px) {
                        font-size: @fontSize*0.9;
                    }
                    @media screen and (max-width:601px) {
                        font-size: @fontSize*0.8;
                    }
                    @media screen and (max-width:526px) {
                        font-size: @fontSize*0.7;
                    }
                    @media screen and (max-width:451px) {
                        font-size: @fontSize*0.6;
                    }
                    @media screen and (max-width:376px) {
                        font-size: @fontSize*0.5;
                    }
                }
            }
            &>span{
                @fontSize:.9rem;
                @lineHeight:1.26rem;
                font-size: @fontSize;
                line-height: @lineHeight;
                @media screen and (max-width:676px) {
                    font-size: @fontSize*0.9;
                    line-height: @lineHeight*0.9;
                }
                @media screen and (max-width:601px) {
                    font-size: @fontSize*0.8;
                    line-height: @lineHeight*0.8;
                }
                @media screen and (max-width:526px) {
                    font-size: @fontSize*0.7;
                    line-height: @lineHeight*0.7;
                }
                @media screen and (max-width:451px) {
                    font-size: @fontSize*0.6;
                    line-height: @lineHeight*0.6;
                }
                @media screen and (max-width:376px) {
                    font-size: @fontSize*0.5;
                    line-height: @lineHeight*0.5;
                }
            }
            &>p{
                @fontSize:.36rem;
                font-size: @fontSize;
                @media screen and (max-width:676px) {
                    font-size: @fontSize*0.9;
                }
                @media screen and (max-width:601px) {
                    font-size: @fontSize*0.8;
                }
                @media screen and (max-width:526px) {
                    font-size: @fontSize*0.7;
                }
                @media screen and (max-width:451px) {
                    font-size: @fontSize*0.6;
                }
                @media screen and (max-width:376px) {
                    font-size: @fontSize*0.5;
                }
            }
        }
    }
}